<template>
    <div class="container shadow px-5">
        <div class="py-1">
            <ul class="list-group list-group-horizontal">
                <li class="list-group-item" v-for="(item, index) in data" :key="item.id" :style="data.sty"
                    @click="handler(item.id, index)">{{ item.text }}</li>
            </ul>
        </div>
        <div class="py-3">
            <textListVue :tcurrentPage="currrentPage"/>
        </div>
    </div>
</template>

<script setup>
import { nanoid } from "nanoid"
import { ref, watchEffect } from "vue"
import textListVue from "./textList.vue"



const data = ref([{
    id: nanoid(6),
    text: '全部',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}, {
    id: nanoid(6),
    text: '精华',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}, {
    id: nanoid(6),
    text: '分享',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}, {
    id: nanoid(6),
    text: '问答',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}, {
    id: nanoid(6),
    text: '招聘',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}, {
    id: nanoid(6),
    text: '客户端测试',
    pStatus: false,
    sty: {
        backgroundColor: 'red'
    }
}])

const currrentPage = ref(0);

const handler = (_id, _index) => {
    currrentPage.value = Number.parseInt(_index)
    console.log(currrentPage.value);
}
watchEffect(() => {
    data.value.forEach((item, index) => {
        if (index == currrentPage.value) {
            item.pStatus = true
        } else {
            item.pStatus = false
        }
    })
})

</script>

<style lang="css" scoped>
li {
    border: none;
    color: green;
}
li:hover{
    color: white;
    background-color: green;
}

a {
    text-decoration: none;
}
</style>